/**
 * 管理界面头部操作按钮
 **/
import React, { memo, useState } from 'react';
import { Button } from 'antd';
import { TableOutlined, CreditCardOutlined } from '@ant-design/icons';
import styles from './styles.less';
import { IActionButton } from './type';
import ChangeColumns from './components/ChangeColumns';

const Index: React.FC<IActionButton> = memo(
  ({ actionList, onTableChange, columns, changeColumns }) => {
    const [visible, setVisible] = useState(false);
    const [radioValue, setRadio] = useState('table');

    const onOpen = () => {
      //打开弹窗
      setVisible(true);
    };

    const onClose = () => {
      //关闭弹窗
      setVisible(false);
    };

    const onOk = (columns: any[]) => {
      //改变列
      if (columns) {
        changeColumns(columns);
      }
    };

    const radioOptions = [
      {
        label: (
          <span>
            <TableOutlined />
            &nbsp;&nbsp;表格
          </span>
        ),
        value: 'table',
      },
      {
        label: (
          <span>
            <CreditCardOutlined />
            &nbsp;&nbsp;卡片
          </span>
        ),
        value: 'card',
      },
    ];

    const onRadioChange = (e: any) => {
      // onTableChange(e?.target?.value);
      // setRadio(e?.target?.value);
    };

    return (
      <div className={styles['action-btn-layout']}>
        <div className={styles['action-btn-opt']}>
          {actionList &&
            actionList?.length > 0 &&
            actionList?.map((item, index) => {
              if (item?.visible) {
                return (
                  <div className={styles['action-btn-child']} key={index}>
                    {item?.component ? (
                      item?.component
                    ) : (
                      <Button
                        type={item?.type}
                        disabled={item?.disabled}
                        size={item?.size}
                        loading={item?.loading}
                        icon={item?.icon}
                        onClick={item?.onClick}
                      >
                        {item?.title}
                      </Button>
                    )}
                  </div>
                );
              } else {
                return '';
              }
            })}
        </div>
        <div className={styles['action-btn-table']}>
          {radioValue === 'table' && (
            <Button type={'default'} icon={<TableOutlined />} onClick={onOpen}>
              显示列
            </Button>
          )}
          {/* <Radio.Group
            defaultValue={'table'}
            options={radioOptions}
            buttonStyle={'solid'}
            optionType={'button'}
            onChange={onRadioChange}
            // size='small'
          />*/}
        </div>
        {visible && (
          <ChangeColumns onClose={onClose} columnsList={columns} onOk={onOk} />
        )}
      </div>
    );
  },
);

export default Index;
